<template>
  <div>
    <div>
    <span>
      <el-input ref='searchInput'
                v-model="NameOrStudentAccount"
                autocapitalize="off"
                autocomplete="off"
                autocorrect="off"
                autofocus
                clearable
                icon="Search"
                placeholder="输入姓名学号班级搜索"
                spellcheck="false"
                style="width: 30%;"
                type="text"
                @change="getAllStudent"
      />
        <el-button
            icon="search"
            style="position: relative; left: 5px"
            type="primary"
            @click="getAllStudent"
        >搜索
        </el-button>
       <el-button type="primary" @click="exportToExcel">导出Excel</el-button>
      </span>
    </div>
    <div style="overflow-y: hidden;overflow-x: auto; ">
      <el-table
          lazy="lazy"
          height="70vh"
          max-height="90vh"
          ref="selectedRow"
          :cell-style="{'text-align':'center'}"
          :data="StudentMessage"
          :header-cell-style="{'text-align':'center'}"
          row-key="id"
          v-model="selectedRow"
          @selection-change="handleSelectionChange"
          @filter-change="filterChange"
          style="width: auto">
        <el-table-column
            type="selection"
            :reserve-selection="true"
            width="55">
        </el-table-column>
        <el-table-column
            width="80"
            type="index"
            align="center"
            :index="1">
          <template #header>
            <el-popover
                placement="bottom"
                :width="600"
                :visible="visible"
            >
              <!-- 配置列面板 -->
              <transition name="fade">
                <div>
                  <div>选择显示信息</div>
                  <div>
                    <div>
                      <el-checkbox v-model="selectAll" @change="selectAllCheck">全选</el-checkbox>
                    </div>
                    <el-checkbox v-model="StudentMessageCanLook.accountNo">学号</el-checkbox>
                    <!--                    <el-checkbox v-model="StudentMessageCanLook.gradeNo">年级</el-checkbox>-->
                    <el-checkbox v-model="StudentMessageCanLook.name">姓名</el-checkbox>
                    <el-checkbox v-model="StudentMessageCanLook.sex">性别</el-checkbox>
                    <el-checkbox v-model="StudentMessageCanLook.classNo">班级</el-checkbox>
                    <el-checkbox v-model="StudentMessageCanLook.contact">联系方式</el-checkbox>
                    <el-checkbox v-model="StudentMessageCanLook.nation">民族</el-checkbox>
                    <el-checkbox v-model="StudentMessageCanLook.duty">团/党内职务</el-checkbox>
                    <el-checkbox v-model="StudentMessageCanLook.whetherIn">团/党籍是否在本组织</el-checkbox>
                  </div>
                </div>
              </transition>
              <div style="text-align: right; margin: 0">
                <el-button size="small" type="primary" plain @click="this.visible = false;">确定</el-button>
              </div>
              <template #reference>
                <el-button
                    icon="setting"
                    class="el-icon-setting"
                    style="font-size: 22px; cursor: pointer"
                    @click="this.visible = !this.visible"
                ></el-button>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column width="120" :sortable="true" label="学号" prop="accountNo"
                         v-if="StudentMessageCanLook.accountNo"/>
        <el-table-column width="100" :sortable="true" label="姓名" prop="name" v-if="StudentMessageCanLook.name"/>
        <el-table-column width="100" :sortable="true" :filter-method="FilterHandler" :filter-multiple="false"
                         label="性别" :filters="sexHeaderSelect" prop="sex" v-if="StudentMessageCanLook.sex"/>
        <el-table-column width="120" :sortable="true" label="班级" prop="classNo" v-if="StudentMessageCanLook.classNo"/>
        <!--        <el-table-column width="120" :sortable="true" :filter-method="FilterHandler" :filter-multiple="false"-->
        <!--                         label="年级" :filters="gradeNoHeaderSelect" prop="gradeNo"-->
        <!--                         v-if="StudentMessageCanLook.gradeNo"/>-->
        <el-table-column width="120" :sortable="true" :filter-method="FilterHandler" :filter-multiple="false"
                         label="政治面貌" :filters="polstatusHeaderSelect" prop="polstatusName"/>
        <el-table-column width="120" :sortable="true" label="加入时间" prop="joinTime"/>
        <el-table-column width="150" :sortable="true" label="团/党内职务" prop="duty" :filter-method="FilterHandler" :filter-multiple="false" :filters="dutyHeaderSelect"
                         v-if="StudentMessageCanLook.duty"/>
        <el-table-column width="120" :sortable="true" label="联系方式" prop="phoneNum"
                         v-if="StudentMessageCanLook.phoneNum"/>
        <el-table-column width="120" :sortable="true" label="民族" prop="nation" v-if="StudentMessageCanLook.nation"/>
        <el-table-column width="200" :sortable="true" label="团/党籍是否在本组织" prop="whetherIn" :filter-method="FilterHandler" :filter-multiple="false" :filters="whetherInHeaderSelect"
                         v-if="StudentMessageCanLook.whetherIn"/>
        <el-table-column class="operate" label="操作" prop="operate" width="120">
          <template v-slot="scope">
            <el-button
                icon="Search"
                size="small" type="danger"
                @click="detailedInformation1(scope.row)"
            >查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
        class="pagination"
        :page-size="pageSize"
        small
        :pager-count="5"
        :page-sizes="[50, 100 , 200 , 500,1000,2000,5000]"
        :total="total"
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
    </el-pagination>
    <el-dialog
        v-model="detailedInformation"
        :close-on-click-modal="false"
        title="学生详细信息"
        width="850px">
      <information v-if="detailedInformation" ref="dialog"/>
    </el-dialog>
  </div>
  <img src="../../assets/photos/图片6.png" class="bottom-image">
  <img src="../../assets/photos/图片3.png" class="left-top-image">
  <img src="../../assets/photos/图片5.png" class="right-image">
</template>

<script>
import request from "@/util/request.js";
import Information from "@/template/Information.vue";
import * as XLSX from 'xlsx'

export default {
  name: "Construction",
  components: {Information},
  data() {
    return {
      information: {},
      selectedRow: [], // 选中行
      selectAll: false,
      visible: false,
      detailedInformation: false,  // 学生详情弹窗
      StudentMessage: [],
      NameOrStudentAccount: "",
      pageNum: 1, //页码
      pageSize: 50,  //页长
      total: 0,  //总表长
      StudentMessageCanLook: {
        accountNo: true,
        name: true,
        sex: true,
        classNo: true,
        phoneNum: true,
        duty: true,
        nation: true,
        whetherIn: true,
      },
      // 政治面貌选择器内容
      polstatusHeaderSelect: [{
        text: '中共党员',
        value: '中共党员'
      }, {
        text: '中共预备党员',
        value: '中共预备党员'
      }, {
        text: '入党积极分子',
        value: '入党积极分子'
      }, {
        text: '共青团员',
        value: '共青团员'
      }],
      sexHeaderSelect: [{
        text: '男',
        value: '男'
      }, {
        text: '女',
        value: '女'
      }, {
        text: '其他',
        value: '其他'
      }],
      dutyHeaderSelect: [{
        text: '书记',
        value: '书记'
      }, {
        text: '副书记',
        value: '副书记'
      }, {
        text: '其他',
        value: '其他'
      }],
      whetherInHeaderSelect: [{
        text: '是',
        value: '是'
      }, {
        text: '否',
        value: '否'
      }, {
        text: '其他',
        value: '其他'
      }],
      // gradeNoHeaderSelect: [{
      //   text: '2021',
      //   value: '2021'
      // }, {
      //   text: '2022',
      //   value: '2022'
      // }, {
      //   text: '2023',
      //   value: '2023'
      // }, {
      //   text: '2024',
      //   value: '2024'
      // }, {
      //   text: '其他',
      //   value: '其他'
      // }],
    };
  },


  //初始化加载
  created() {
    this.getAllStudent(); //加载所有学生的所有信息
  },
  methods: {
    // 选行
    handleSelectionChange(val) {
      this.selectedRow = val;
    },
    exportToExcel() {
      this.$nextTick(() => {
        // 获取 el-table 中的当前显示数据
        const tableData = this.selectedRow
        // 确保数据存在
        if (tableData && tableData.length > 0) {
          // 获取选择的列，并按顺序存储到数组中
          const selectedColumns = [];
          for (const key in this.StudentMessageCanLook) {
            if (this.StudentMessageCanLook[key]) {
              selectedColumns.push(key);
            }
          }

          // 过滤数据，只保留选中的列并按照顺序存储到数组中
          const filteredData = tableData.map(row => {
            const filteredRow = {};
            selectedColumns.forEach(column => {
              filteredRow[column] = row[column] !== undefined ? row[column] : '';
            });
            return filteredRow;
          });

          // 将数据转换为 Excel 格式
          const worksheet = XLSX.utils.json_to_sheet(filteredData);
          const workbook = XLSX.utils.book_new();
          XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

          // 下载 Excel 文件
          XLSX.writeFile(workbook, 'student_data.xlsx');
        } else {
          // 提示用户没有数据可供导出
          alert('没有数据可供导出！');
        }
      });
    },
    selectAllCheck() {
      // 设置所有复选框的选中状态
      Object.keys(this.StudentMessageCanLook).forEach((key) => {
        this.StudentMessageCanLook[key] = this.selectAll;
      });
    },
    detailedInformation1(scope) {
      request.get("/info_account/getByAccountNo?accountNo=" + scope.accountNo).then(res => {
        console.log(res.data)
        if (res.data.data !== undefined) {
          this.information = res.data.data
          this.information.polstatusName = scope.polstatusName
          this.information.plostatusEnterTime = scope.joinTime
          console.log(this.information)
        } else {
          this.information = scope
        }
        window.getTemplateData = (callback) => {
          this.getTemplateData(callback);
        }
        this.detailedInformation = true
      })
    },
    getTemplateData(callback) {
      callback(this.information);
    }, //获取文书数据
    //按学号或姓名模糊查询学生/获取所有学生信息
    getAllStudent() {
      request.get("/related_construction/page?name=" + this.NameOrStudentAccount + "&accountNo=" + this.NameOrStudentAccount + "&pageNum=" + this.pageNum + "&pageSize=" + this.pageSize).then(res => {
        if (res.data.code === '200') {
          for (let key in res.data.data) {
            if (key === "records") {
              this.StudentMessage = res.data.data[key];
            } else if (key === "total") {
              this.total = res.data.data[key];
            }
          }
        }
      })
    },
    //表尾分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAllStudent();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getAllStudent();
    },
    filterChange(filter) {
      this.$refs.selectedRow.clearSelection()
    },
    FilterHandler(value, row, column) {
      const property = column['property'];
      // 如果值是“其他”，则返回除了已有选项之外的字段
      if (value === '其他') {
        return !column['filters'].some(filter => filter.value === row[property]);
      }
      // 否则按照正常逻辑进行筛选
      return row[property] === value;
    }
  },
};

</script>

<style scoped>
@media (min-width: 1500px){
  .bottom-image {
    position: fixed; /* 将图片固定在底部 */
    bottom: 0;
    left: 50%; /* 让图片水平居中 */
    transform: translateX(-50%);
    width: 100%; /* 根据需要调整图片宽度 */
    height: auto; /* 保持宽高比 */
  }
  .right-image {
    position: fixed; /* 将图片固定在右侧 */
    top: 75%; /* 让图片垂直居中 */
    left: 70%; /* 让图片水平居中 */
    transform: translateY(-50%);
    width: 80vw; /* 根据需要调整图片宽度 */
    height: auto; /* 保持宽高比 */
  }
  .left-top-image {
    position: fixed; /* 将图片固定在左上角 */
    top: -1%;
    left: 0;
    width: 100px; /* 根据需要调整图片宽度 */
    height: auto; /* 保持宽高比 */
  }
  .bottom-image, .right-image, .left-top-image {
    z-index: 1;
    pointer-events: none;
  }
}



</style>
